import React from 'react';
import { Route, IndexRoute } from 'react-router';
import Counter from './containers/Counter';
import Main from './containers/Main';
import Home from './containers/Home';
import { load } from './actions';

export default store => {

  // onEnter是路由组件的一个属性。
  // onEnter所接受的函数会在即将进入路由之前被触发。同时，它还提供了nextState和replace两个参数作为下一个路由状态和重定向函数。
  // 如果列出了第三个参数cb，onEnter所接受的函数将会异步运行，路由跳转也将被阻塞，直到cb被调用
  const preload = (nextState, replace, cb) => {
    // SERVER__||nextState.location.action==='PUSH' 的作用则是限制只在服务端和客户端跳转时进行数据预载，
    // 这样做可以防止服务端渲染完成后客户端重复预载数据。
    // __SERVER__：该参数是个全局变量，它用于判断当前代码是否运行于服务端。该参数的定义是在服务端入口以及Webpack插件中进行的。
    // nextState.location.action：该参数来自React Router，它描述了URL变化的类型。PUSH代表从现有页面跳转到其他页面。
    if (__SERVER__ || nextState.location.action === 'PUSH') {
      store.dispatch(load()).then(() => cb());
    } else {
      cb();
    }
  };
  return (
    <Route path="/" component={Main}>
      <IndexRoute component={Home}/>
      <Route path="counter" component={Counter} onEnter={preload}/>
    </Route>
  );
};
